import { createContext, useContext } from 'react'

// 声明跨层组件
const SetNameContext = createContext();

// 中间组件
function A() {
  return (
    <div>
      A
      <B />
    </div>
  )
}

// 底层组件
function B() {
  const { name } = useContext(SetNameContext);
  return (
    <div>B{name}</div>
  )
}

// 顶层组件
const App = () => {

  return (
    <div>
      <SetNameContext.Provider value={{ name: '张三' }}>
       <A />
      </SetNameContext.Provider>
    </div>
  )
};

export default App;
